<template>
    <div v-bind="$attrs" style="border:1px solid #ccc;">
        <el-calendar>
            <template #date-cell="{ data }">
                <span class="dtcell" :class="{ selected: hasSelect(data.day) }" @click="doSelectDate(data.day)">{{
                    data.day.split('-')[2] }}</span>
            </template>
        </el-calendar>
    </div>
</template>

<script>

export default {
    name:"MySelectDates",
    props: {
        modelValue: Array,
        disabled: Boolean,
    },
    emits: ["update:modelValue"],
    data() {
        return {
            dts: []
        }
    },
    methods: {
        doSelectDate(dt) {
            let ix = this.dts.indexOf(dt);
            if (ix == -1) {
                this.dts.push(dt);
            } else {
                this.dts.splice(ix, 1);
            }
            this.$emit("update:modelValue", this.dts);
        },
        hasSelect(dt) {
            return this.dts.includes(dt);
        }
    },
    watch: {
        modelValue() {
            this.dts = this.modelValue || [];
        }
    }
}
</script>

<style scoped>
.el-calendar {
    --el-calendar-cell-width: 50px !important;
}

.el-calendar-day .dtcell {
    display: block;
    text-align: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-right: auto;
}

.el-calendar-day .selected {
    color: #fff;
    background-color: #409eff;
}
</style>